<template>
  <div class="attendance-container">

       <el-button-group>
           <el-button type="success" @click="addClick">创建</el-button>
           <el-button type="warning">调整考勤</el-button>
       </el-button-group>
       <el-table :data="tableData" style="width: 100%">
         <el-table-column type="index" label="序号" width="180"/>
         <el-table-column prop="name" label="姓名" width="180" />
         <el-table-column prop="age" label="年龄" width="180" />
         <el-table-column prop="isAttend" label="出勤状态" />
         <el-table-column label="操作" #default="{row}">

                   <el-button type="warning" @click="editRow(row)">修改</el-button>
                    <el-button type="danger">删除</el-button>

         </el-table-column>
       </el-table>
    <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="50"
        class="mt-4"
        @current-change="handleCurrentChange"

    />

      <el-dialog v-model="isVisible">


           <el-form label-width="80">
                <el-form-item label="姓名">
                     <el-input v-model="current.name"></el-input>
                </el-form-item>

               <el-form-item label="考勤状态">
                   <el-select v-model="current.status.id">
                        <el-option  v-for="item in statuses" :value="item.id" :label="item.title"></el-option>

                   </el-select>
               </el-form-item>

                <el-form-item>
                     <el-button type="primary" @click="btnSubmitClick">确定</el-button>
                </el-form-item>

           </el-form>

      </el-dialog>
  </div>
</template>


<script>
// @ is an alias to /src

const statuses = [
  {
     id:1,
     title:'出勤'
  }, {
    id:2,
    title:'缺勤'
  }
]


export default {
  name: 'Test',
  data(){
      return{
          tableData:[],
          isVisible:false,
          current:{
             name:'',
             status:{
                id:1,
                title:''
             }
          },statuses:[]
        }
  },mounted(){
          this.statuses = statuses;

        this.axios({
             url:'http://test.org/attend',
             method:'get',
             dataType:'json'
        }).then((res)=>{
             console.log(res.data);
          this.tableData = res.data;
        })


  },methods:{
      addClick(){
          this.isVisible = true;
      }, editRow(row){

          //  this.current = this.row;

             this.current = {
               name:row.name,
               status: {
                   id: row.isAttend=='出勤'?1:2
               }
             }
             this.isVisible = true;



    },handleCurrentChange(val){
         alert(val)
    },btnSubmitClick(){
          this.axios({
             url:'http://test.org/attend/add',
             method:'get',
             dataType:'json'
          }).then((res)=>{
               console.log(res.data);
               console.log(this.current);

               this.isVisible = false;
          })
    }
  }
}
</script>
<style scoped>
   .attendance-container{
       padding: 15px;
   }

   .el-select{
      width:100%
   }
</style>

